<template>
  <div class="screenfull-container" @click="click">
    <i :class="`screenfull-icon iconfont icon-${isFullscreen ? 'exit-fullscreen' : 'fullscreen'}`"></i>
  </div>
</template>

<script setup lang="ts">
import screenfull from 'screenfull'

let isFullscreen: Ref<boolean> = ref(false)

function click(): void | boolean {
  if (!screenfull.isEnabled) {
    ElMessage.warning('你的浏览器不支持全屏')
    return false
  }
  screenfull.toggle()
}

function change(): void {
  isFullscreen.value = screenfull.isFullscreen
}

onMounted(() => {
  if (screenfull.isEnabled) screenfull.on('change', change)
})
onBeforeUnmount(() => {
  if (screenfull.isEnabled) screenfull.off('change', change)
})
</script>

<style lang="scss" scoped>
.screenfull-container {
  i {
    font-size: 20px;
  }
}
</style>
